<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC</title>
</head>
<body>
  <!-- 
    什么是 BFC
      - W3C 上对 BFC 对定义：
        浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks、table-cells 和 table-captions），
        以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新的块格式化上下文
      - MDN 上对 BFC 的描述：
        块格式上下文（Block Formatting Context, BFC）是 Web 页面的可视 CSS 渲染的一部分，是块盒子的
        布局过程发生的区域，也是浮动元素与其它元素交互的区域
      - 更加通俗的描述：
        1. BFC 是 Block Formatting Context（块级格式上下文），可以理解成元素的一个“特异功能”
        2. 该“特异功能”，在默认的情况下处于关闭状态，当元素满足了某些条件后，该“特异功能”被激活
        3. 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC（又称：开启了 BFC）
    开启了 BFC 能解决什么问题
      1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题
      2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖
      3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷
    如何开启 BFC
      - 根元素
      - 浮动元素
      - 绝对定位、固定定位的元素
      - 行内块元素
      - 表格单元格：table、thead、tbody、tfoot、th、td、tr、caption
      - overflow 的值不为 visible 的块元素
      - 伸缩项目
      - 多列容器
      - column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
      - display 的值，设置为 flow-root
   -->
</body>
</html>